import { css } from '@emotion/react';
import './App.css';

export const appContainerStyles = css`
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow: hidden;
`;

export const sidebarStyles = css`
  flex: 0 0 20rem;
  background-color: var(--oxford-blue);
  & > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 5rem;
    background-color: var(--xiketic);
    text-align: center;

    & > h1 {
      margin: 0.5rem;
      font-size: 1.4rem;
      line-height: 1.6rem;
    }
  }
`;

export const sidebarNavStyles = css`
  padding: 1rem;

  & > ul {
    margin: 0;
    padding: 0;

    & > li {
      list-style: none;
      margin-bottom: 0.8rem;
    }
  }
`;

export const mainContainerStyles = css`
  flex: 1;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 20rem);
  background-color: var(--almond);

  & > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 5rem;
    background-color: var(--purple-navy);
    & > h1 {
      margin: 0.5rem;
      font-size: 1.4rem;
      line-height: 1.6rem;
    }
  }

  & > main {
    flex: 1;
    padding: 1rem;
    color: var(--xiketic);
    overflow: auto;
    box-shadow: inset 2px 2px 2px #0d0c1d66;
  }

  & > footer {
    padding: 0.5rem 1rem;
    text-align: right;
    background-color: var(--heliotrope-gray);
  }
`;
